<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<title></title>
	</head>
	<body>
		<div id="app">
			<!--v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别-->
			<div v-if="Math.random() > 0.5">
			  Now you see me
			</div>
			<div v-else>
			  Now you don't
			</div>
			
			<!--v-else-if-->
			<input type="text" v-model="type">
			<div v-if="type === 'A'">
			  A
			</div>
			<div v-else-if="type === 'B'">
			  B
			</div>
			<div v-else-if="type === 'C'">
			  C
			</div>
			<div v-else>
			  Not A/B/C
			</div>
			
			<!--key用来保证这两个input元素是完全独立的——不要复用它们-->
			<button v-on:click="change()">切换</button>
			<template v-if="loginType === 'username'">
			  <label>Username</label>
			  <input placeholder="Enter your username" key="username-input">
			</template>
			<template v-else>
			  <label>Email</label>
			  <input placeholder="Enter your email address" key="email-input">
			</template>
			
			<!--如果需要非常频繁地切换，则使用 v-show 较好，如果在运行时条件不太可能改变，则使用 v-if 较好  -->
			<div v-show="true">123456789</div>
			
		</div>
		
		
		
		
		
		
		<script src="js/vue.js" ></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					type: '',
					loginType: 'username'
				},
				methods: {
					change: function(){
						if(this.loginType == 'username'){
							this.loginType = 'email'
						} else {
							this.loginType = 'username'
						}
					}
				}
			});
			
			
		</script>
	</body>
</html>
